
//router/index.js
//#region 
/* 
  1.导入 vue-router
  createRouter 该方法是用来创建路由用的
  createWebHistory 是用来创建路由模式用的(History)
  createWebHashHistory 用来创建路由模式用的(Hash)

  高频面试题:
  History:路径前面会使用 / 开头,一般是要和后端配合使用进行页面跳转,如果配合不当容易产生404页面,路径看起来会比较美观.

  Hash:前面会有 # 号键,无需后端配合, 使用方便
*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 导入home组件
import HomeView from '@/views/HomeView.vue'

// 导入管理员列表和用户列表的页面
import ManagerIndexView from '@/views/manager/ManagerIndexView'
import ManagerListView from '@/views//manager/ManagerListView'
import UserListView from '@/views/manager/UserListView'
 
// 导入轮播图管理的页面
import BannerIndexView from '@/views/banner/BannerIndexView'
import BannerListView from '@/views/banner/BannerListView'
import AddBannerView from '@/views/banner/AddBannerView'

// 导入商品管理的页面
import ProIndexView from '@/views/pro/ProIndexView'
import ProListView from '@/views/pro/ProListView'
import AddProView from '@/views/pro/AddProView'

// 导入图表管理
import EChartsIndexView from '@/views/echarts/EChartsIndexView'
import EChartsShowView from '@/views/echarts/EChartsShowView'
import EChartsTestView from '@/views/echarts/EChartsTestView'

// excel 管理
import ExcelIndexView from '@/views/excel/ExcelIndexView'
import ExcelImportView from '@/views/excel/ExcelImportView'
import ExcelExportView from '@/views/excel/ExcelExportView'

// 富文本编辑器
import EditorIndexView from '@/views/editor/EditorIndexView'
import EditorShowView from '@/views/editor/EditorShowView'

// 地图
import MapIndexView from '@/views/map/MapIndexView'
import MapShowView from '@/views/map/MapShowView'




//路由规则配置
//导出路由配置的数组
export const routes = [
  {
    //访问时的路径
    path: '/',
    //路由的别名
    name: 'home', 
    label:'首页',
    //当访问到对应的路径时候,会展示的组件
    component: HomeView,
    //路由嵌套,配置的是二级路由
    children:[
      // 管理员列表
      {
        path:'manager',
        name:'manager',
        label:'账号管理',
        component:ManagerIndexView,
        // 配置三级路由
        children:[
          {
            path:'managerlist',
            name:'managerlist',
            component:ManagerListView,
            label:'管理员列表'
            
          },
          {
            path:'userlist',
            name:'userlist',
            component:UserListView,
            label:'用户列表'
          }
        ]
      },
      // 轮播图管理
      {
        path:'banner',
        name:'banner',
        label:'轮播图管理',
        component:BannerIndexView,
        //配置三级路由
        children:[
          {
            path:'bannerlist',
            name:'bannerlist',
            label:'轮播图列表',
            component:BannerListView
          },
          {
            path:'addbanner',
            name:'addbanner',
            label:'添加轮播图',
            component:AddBannerView
          }
        ]
      },
      // 商品管理
      {
        path:'pro',
        name:'pro',
        label:'商品管理',
        component:ProIndexView,
        children:[
          {
            path:'prolist',
            name:'prolist',
            label:'商品列表',
            component:ProListView
          },
          {
            path:'addpro',
            name:'addpro',
            label:'添加商品',
            component:AddProView
          }
        ]
      },
      // 图表管理
      {
        path:'echarts',
        name:'echarts',
        label:'图表管理',
        component:EChartsIndexView,
        children:[
          {
            path:'echartsshow',
            name:'echartsshow',
            label:'显示图表',
            component:EChartsShowView
          },
          {
            path:'echartstest',
            name:'echartstest',
            label:'测试图表',
            component:EChartsTestView
          }
        ]
      },
      // excel管理
      {
        path:'excel',
        name:'excel',
        label:'Excel管理',
        component:ExcelIndexView,
        children:[
          {
            path:'excelimport',
            name:'excelimport',
            label:'Excel导入',
            component:ExcelImportView
          },
          {
            path:'excelexport',
            name:'excelexport',
            label:'Excel导出',
            component:ExcelExportView
          }
        ]
      },
      // 富文本编辑器
      {
        path:'editor',
        name:'editor',
        label:'富文本编辑器',
        component:EditorIndexView,
        children:[
          {
            path:'editorshow',
            name:'editorshow',
            label:'显示编辑器',
            component:EditorShowView
          }
        ]
      },
      // 地图管理
      {
        path:'map',
        name:'map',
        label:'地图管理',
        component:MapIndexView,
        children:[
          {
            path:'mapshow',
            name:'mapshow',
            label:'百度地图',
            component:MapShowView
          }
        ]
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    label:'登陆',
    //#region 
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //#endregion
    //路由的懒加载,什么时候用到什么时候再加载
    //对于一些不确定立即显示的页面选择路由懒加载
    //对于一级页面不要用懒加载,对于不确定立即显示的页面选择懒加载
    component: () => import('../views/LoginView.vue')
  },
  {
    path: '/vuextest',
    name: 'vuextest',
    label:'vuex 使用',
    //#region 
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    //#endregion
    //路由的懒加载,什么时候用到什么时候再加载
    //对于一些不确定立即显示的页面选择路由懒加载
    //对于一级页面不要用懒加载,对于不确定立即显示的页面选择懒加载
    component: () => import('../views/vuextest/VuexTest.vue')
  }
]

//创建一个router实例
const router = createRouter({
  //设置路由模式
  history: createWebHashHistory (import.meta.env.BASE_URL),
  //路由规则定义
  routes
})

//导出 router 实例
export default router
//#endregion
